<template>
  <div class="app-container">
    <YxhyTableQuery
      ref="yxhyTableQueryRef"
      :query-params.sync="queryParams"
      :query-columns="queryColumns"
      @search="handleQuery"
    >
      <template slot="selectRemote" slot-scope="{param}">
        <template v-if="param === 'video_id'">
          <YxhySelectRemote
            :value.sync="queryParams.video_id"
            :request-fn="queryNonSortLibrary"
            :request-key="`title_search`"
            :response-id="`library_id`"
            :response-name="`title`"
            :placeholder="`请输入短剧名称`"
          />
        </template>
      </template>
      <template slot="datetimeRange">
        <YxhyDatetimeRange
          :start-date.sync="queryTimeRange.pay_at_start_search"
          :end-date.sync="queryTimeRange.pay_at_end_search"
          :start-placeholder="`支付开始日期`"
          :end-placeholder="`支付结束日期`"
        />
      </template>
      <el-form-item slot="clearButton">
        <el-button type="info" icon="el-icon-delete" plain @click="handleClear" />
      </el-form-item>
    </YxhyTableQuery>

    <YxhyTableData
      :columns="columns"
      :data="tableList"
      :loading="loading"
      :other-config="{
        'summary-method': getSummaries,
        'show-summary': true
      }"
    >
      <!-- 订单号插槽 -->
      <template #orderNo>
        <el-table-column align="center" width="160">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">订单号</p>
            <p class="font-color-th">第三方订单号</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.order_no }}</p>
            <p class="font-color-td">{{ row.third_order_no | domEmpty }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 广告账户ID插槽 -->
      <template #channel_ads>
        <el-table-column label="广告账户ID" align="center" width="160">
          <template slot-scope="{ row }">
            <p v-for="item in row.channel_ads" :key="item" class="font-color-td">{{ item }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 用户信息插槽 -->
      <template #userInfo>
        <el-table-column label="用户信息" width="160">
          <template slot-scope="{ row }">
            <p class="font-color-td">ID：{{ row.user_id }}</p>
            <p class="font-color-td">昵称：{{ row.nick_name }}</p>
            <p class="font-color-td">手机号：{{ row.mobile | domEmpty }}</p>
            <p class="font-color-td">地区：{{ row.locate_city | domEmpty }}</p>
            <p class="font-color-td">IP：{{ row.last_ip }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 支付金额插槽 -->
      <template #payMoney>
        <el-table-column align="center" width="100">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">支付金额</p>
            <p class="font-color-th">支付状态</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">￥{{ row.recharge_money }}</p>
            <p class="pay-status-icon" :class="{'pay-success': row.status === 1, 'pay-final': row.status === 0 }">{{ row.status_text }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 付费回传类型插槽 -->
      <template #transferType>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">付费回传类型</p>
            <p class="font-color-th">回传状态</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.adv_text | domEmpty }}</p>
            <p class="font-color-td">{{ row.adv_status_text }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 渠道Id插槽 -->
      <template #channel>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">渠道Id</p>
            <p class="font-color-th">渠道名</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.channel_id }}</p>
            <p class="font-color-td">{{ row.channel_name }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 计划Id插槽 -->
      <!--      <template #plan>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">计划Id</p>
            <p class="font-color-th">计划名</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">xxxx</p>
            <p class="font-color-td">xxx</p>
          </template>
        </el-table-column>
      </template>-->
      <!--   支付时间插槽  -->
      <template #payTime>
        <el-table-column align="center" :width="columnDateTimeWidth()">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">发起时间</p>
            <p class="font-color-th">支付时间</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td width-create-time">{{ row.created_at | domEmpty }}</p>
            <p class="font-color-td width-create-time">{{ row.pay_at | domEmpty }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 注册时间插槽 -->
      <template #registerTime>
        <el-table-column align="center" :width="columnDateTimeWidth()">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">注册时间</p>
            <p class="font-color-th">染色时间</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td width-create-time">{{ row.reg_time }}</p>
            <p class="font-color-td width-create-time">{{ row.update_channel_time | domEmpty }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 最后看剧记录插槽 -->
      <template #lastSeeTime>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">观看剧集</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.video_name | domEmpty }}</p>
            <p v-if="row.episode_num > 0" class="font-color-td">第{{ row.episode_num }}集</p>
          </template>
        </el-table-column>
      </template>
      <!-- 插槽内容 -->
      <template #action>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="{ row }">
            <!--  已支付，未回传  -->
            <template v-if="row.status === 1 && row.adv_status === 0">
              <el-button v-hasPermi="['order/orderData:report']" type="success" size="mini" @click="handleHandMovement(row)">回传</el-button>
            </template>
            <!--  已支付，未退款  -->
<!--            <template v-if="row.status === 1 && row.refund_status === -1">
              <el-button v-hasPermi="['order:orderData:return']" type="primary" size="mini" @click="handleRefund(row)">退款</el-button>
            </template>-->
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

    <!--  手动回传弹出层  -->
    <HandMovement ref="handMovementRef" :order_id="actionOrderId" :order_type="1" @refresh="init()" />

    <!--  退款弹出层  -->
    <RefundPopup ref="refundPopupRef" :order_id="actionOrderId" :order_type="1" :pay-money="actionPayMoney" @refresh="init()" />

  </div>
</template>

<script>
import { ADV_STATUS, columnsStatic, ORDER_PAY_STATUS } from './Ds.js'
import { queryOrderCoinList } from '@/api/order/orderData'
import HandMovement from '@/components/HandMovement/index.vue'
import RefundPopup from '@/components/RefundPopup/index.vue'
import { queryListNonSortMp } from '@/api/miniProgram/mp'
import { queryNonSortLibrary } from '@/api/video/library'
import { twoDigitsNewIntl } from '@/utils/numberNewIntl'

export default {
  name: 'OrderDataCoinList',
  components: {
    HandMovement,
    RefundPopup
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        order_no_search: undefined,
        user_id_search: undefined,
        nick_name_search: undefined,
        status_search: undefined,
        video_id: undefined,
        ad_id: undefined,
        channel_id: undefined
      },
      queryTimeRange: {
        pay_at_start_search: undefined,
        pay_at_end_search: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        placeholder: '请输入订单号',
        type: 'input',
        param: 'order_no_search'
      },
      {
        label: '',
        placeholder: '请输入用户ID',
        type: 'input',
        param: 'user_id_search'
      },
      {
        label: '',
        placeholder: '请输入短剧名称',
        type: 'selectRemote',
        param: 'video_id'
      },
      {
        label: '',
        type: 'datetimeRange',
        param: 'pay_at_start_search'
      },
      {
        label: '',
        placeholder: '支付状态',
        type: 'select',
        param: 'status_search',
        selectOptions: [{ name: '已支付', value: 1 }, { name: '未支付', value: 0 }] // 下拉框选项
      },
      {
        label: '',
        placeholder: '请输入账户ID',
        type: 'input',
        param: 'ad_id'
      },
      {
        label: '',
        placeholder: '请输入渠道ID',
        type: 'input',
        param: 'channel_id'
      }
      ],
      loading: false,
      // 表格列
      columns: columnsStatic,

      actionOrderId: '',
      actionPayMoney: '',

      queryListNonSortMp,
      queryNonSortLibrary
    }
  },
  async created() {
    await this.init()
  },
  methods: {
    // 表格数据源
    async init() {
      this.loading = true
      const res = await queryOrderCoinList({
        ...this.queryPage,
        ...this.queryParams,
        ...this.queryTimeRange
      })
      // 处理响应
      res.data.map(e => {
        const { status, adv_status, channel_ad_id } = e
        e.status_text = ORDER_PAY_STATUS[status]
        e.adv_status_text = ADV_STATUS[adv_status]
        e.channel_ad_id = channel_ad_id || '-'
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },

    /** 合计计算 */
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      console.log(param)
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        // 支付金额
        if (index == 1) {
          // 只统计已支付的数据
          const values = data.filter(item => item.status === 1).map(item => Number(item.recharge_money))
          const sumMoney = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)

          sums[index] = '￥' + twoDigitsNewIntl(sumMoney)
        }
      })

      return sums
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.queryTimeRange = {
        pay_at_start_search: undefined,
        pay_at_end_search: undefined
      }

      this.$refs.yxhyTableQueryRef.onEmpty()
    },
    /** 回传按钮操作 */
    handleHandMovement(row) {
      const { order_id } = row
      this.actionOrderId = order_id
      this.$refs.handMovementRef.handleOpen()
    },
    /** 退款操作按钮 */
    handleRefund(row) {
      const { order_id, recharge_money } = row
      this.actionOrderId = order_id
      this.actionPayMoney = recharge_money
      this.$refs.refundPopupRef.handleOpen()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
